<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav" @btnClick="btnClick" ref="nav"></detail-nav-bar>
    <!-- <scroll class="content" ref="content" @rscroll="rscroll" :probe-type="3"> -->
    <detail-swiper :topImages="topImage"></detail-swiper>
    <detail-base :goods="Goods"></detail-base>
    <detail-shop :shops="Shops"></detail-shop>
    <detail-goods :detail-info="detailInfo" @imgeDetailLoad="imgeDetailLoad"></detail-goods>
    <detail-params :goods-params="GoodsParams" ref="params"></detail-params>
    <detail-comment :comment-info=" commentInfo" ref="comment"></detail-comment>
    <good-list :goods="recommends" ref="recommends"></good-list>
    <!-- </scroll> -->
    <detail-bottom-bar @cartClick="onCart"></detail-bottom-bar>
  </div>
</template>
<script>
import DetailNavBar from './detailComps/DetailNavBar.vue'
import DetailSwiper from './detailComps/DetailSwiper.vue'
import DetailBase from './detailComps/DetailBase.vue'
import DetailShop from './detailComps/DetailShop.vue'
import DetailGoods from './detailComps/DetailGoods.vue'
import DetailParams from './detailComps/DetailParams.vue'
import DetailComment from './detailComps/DetailComment.vue'
import DetailBottomBar from './detailComps/DetailBottomBar.vue'

import {getDetail, Goods, Shops, GoodsParams, getRecommend} from 'network/detail'
import {debounce} from 'common/utils'

import GoodList from 'components/content/goods/GoodList.vue'


// import Scroll from 'components/common/scroll/Scroll.vue'


export default {
  name: 'Detail',
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBase,
    DetailShop,
    // Scroll,
    DetailGoods,
    DetailParams,
    DetailComment,
    GoodList,
    DetailBottomBar

  },
  data() {
    return {
      iid: null,
      topImage: [],
      Goods: {},
      Shops: {},
      detailInfo: {},
      GoodsParams: {},
      commentInfo: {},
      recommends: [],
      //   itemTopY:[],
      //   deTopY:null
      //   itemListener:null,
      //  currentIndex:0
    }
  },
  // mounted(){
  //      this.itemListener=()=>{ refresh() }
  //      const refresh=debounce(this.$refs.content.refresh,200)
  //      this.$bus.$on("overImg",this.itemListener)
  // },
  // destroyed(){
  //     this.$bus.$off("overImg",this.itemListener)
  // },
  methods: {
    onCart() {
      const product = {}
      product.image = this.topImage[0],
        product.title = this.Goods.title,
        product.desc = this.Goods.desc,
        product.price = this.Goods.realPrice,
        product.iid = this.iid
      // console.log(product)
      this.$store.commit("addCart", product)
    },
    imgeDetailLoad() {
      // this.refresh();
      // this.deTopY()
    },
    btnClick(index) {
      // this.$refs.content.scrollTo(0,itemTopY[index],0)
    },
    // rscroll(position){
    //     const positionY=-position.y;
    //     for(let i=0;i<this.itemTopY.length-1;i++){
    //         if(this.currentIndex!==i&&((i<this.itemTopY.length-1&&positionY>=this.itemTopY[i]&&positionY<this.itemTopY[i+1]))){
    //         this.currentIndex=i;
    //         this.$refs.nav.currentIndex=this.currentIndex;
    //         }
    //     }
    // }
  },
  created() {
    this.iid = this.$route.params.iid
    getDetail(this.iid).then(res => {
      // console.log(res)
      this.topImage = res.result.itemInfo.topImages
      this.Goods = new Goods(res.result.itemInfo, res.result.columns, res.result.shopInfo.services)
      this.Shops = new Shops(res.result.shopInfo)
      this.detailInfo = res.result.detailInfo
      this.GoodsParams = new GoodsParams(res.result.itemParams.info, res.result.itemParams.rule)
      if (res.result.rate.cRate !== 0) {
        this.commentInfo = res.result.rate.list[0]
      }
    })
       getRecommend().then(res => {
      console.log(res)
      this.recommends = res.data.list
    })
    //   this.deTopY=debounce(()=>{
    //       this.itemTopY=[]
    //       this.itemTopY.push(0)
    //       this.itemTopY.push(this.$refs.params.$el.offsetTop)
    //       this.itemTopY.push(this.$refs.comment.$el.offsetTop)
    //       this.itemTopY.push(this.$refs.recommends.$el.offsetTop)
    //this.itemTopY.push(Number.MAX_VALUE)
    //   },500)
  }
}
</script>
<style scoped>
#detail {
  position: relative;
  background-color: #fff;
  z-index: 9;
}

.detail-nav {
  position: fixed;
  top: 0;
  z-index: 18;
  background-color: #fff;
  right: 0;
  left: 0;
}

/* .content{ overflow: hidden; position: absolute;top: 44px; bottom: 49px; left: 0; right: 0;} */
</style>
